import { useState, useMemo } from 'react'
import Modal from './Modal'
function Index() {
	const [visible, setVisible] = useState(false)
	const [nameShow, setNameShow] = useState(false)

	const handleClick = () => {
		console.log('点击')
		setVisible(!visible)
		setNameShow(!nameShow)
	}
	/* 防止 Model PureComponent 失去作用 */

	const [onOk, onClose, onCancel] = useMemo(() => {
		const onOk = () => {
			console.log('点击确定')
		}
		const onClose = () => setVisible(false)
		const onCancel = () => console.log('点击取消')
		return [onOk, onClose, onCancel]
	}, [])

	return (
		<div>
			<Modal
				width={700}
				onCancel={onCancel}
				onOk={onOk}
				onClose={onClose}
				title="《hello，React》"
				visible={visible}
			>
				<div className="feel">
					小册感受：
					<input placeholder="写下你的感受" />
					{nameShow && <p>作者：我不是外星人</p>}
				</div>
			</Modal>
			<button
				onClick={() => {
					setVisible(!visible)
					setNameShow(false)
				}}
			>
				mode show
			</button>
			<button onClick={handleClick}>mode show (显示作者)</button>
		</div>
	)
}

function Index1() {
	const handleClick = () => {
		Modal.show({
			content: <p>确定购买《React进阶小册吗》</p>,
			title: '《React进阶小册吗》',
			onOk: () => console.log('确定'),
			onClose: () => Modal.hide(),
			onCancel: () => console.log('取消'),
		})
	}
	return (
		<div>
			<button onClick={handleClick}>静态方式调用 显示Modal </button>
		</div>
	)
}
export default Index1
